<template>
	<view style="height: 100%;">
		<view class="distribution-posters">
			<image :src="imgUrls" class="slide-image" />
			<view class="keep bg-color" @click="savePosterPath">保存海报</view>
		</view>
		<view class="canvas" v-if="canvasStatus"><canvas style="width:750px;height:750px;" canvas-id="canvasOne"></canvas></view>
	</view>
</template>

<script>
import { getUserInfo } from '@/api/user.js';
import { getQrcode } from '@/api/api.js';
import { base64src } from '@/utils/base64src.js';

export default {
	components: {},
	data() {
		return {
			imgUrls: 'https://image.tocj1314.com/fe5c2a746fb84c0d91ddbcb6103659ef.png',
			userInfo: {},
			poster: '',
			canvasStatus: true
		};
	},
	onReady() {
		let that = this;
		uni.showLoading({
			title: '海报生成中',
			mask: true
		});

		getUserInfo().then(res => {
			that.userInfo = res.data;
			Promise.allSettled([that.downloadFile(that.imgUrls), that.downloadFile(that.userInfo.avatar), that.getMpQrCode()]).then(values => {
				const bgImg = values[0]?.value?.tempFilePath;
				const avatar = values[1]?.value?.tempFilePath;
				const qrCode = values[2]?.value;
				console.log(bgImg, avatar, qrCode);
				that.PosterCanvas(bgImg, avatar, qrCode, that.userInfo.nickname);
			});
		});
	},
	methods: {
		downloadFile: function(url) {
			return new Promise(function(resolve, reject) {
				uni.downloadFile({
					url: url,
					success: function(res) {
						resolve(res);
					},
					fail: function(err) {
						reject(err);
					}
				});
			});
		},
		getMpQrCode: function() {
			let that = this;
			return new Promise(function(resolve, reject) {
				getQrcode({
					pid: that.userInfo.uid,
					path: 'pages/index/index'
				})
					.then(res => {
						base64src(res.data.code, res => {
							resolve(res);
						});
					})
					.catch(err => {
						reject(err);
					});
			});
		},
		PosterCanvas: function(bgImg, avatar, qrCode, nickname) {
			let ctx = uni.createCanvasContext('canvasOne');
			ctx.clearRect(0, 0, 0, 0);
			let that = this;
			ctx.drawImage(bgImg, 0, 0, 750, 750);
			ctx.save();
			ctx.drawImage(qrCode, 300, 480, 150, 150);
			ctx.restore();
			if (avatar) {
				ctx.drawImage(avatar, 70, 50, 70, 70);
				ctx.restore();
				ctx.setFontSize(24);
				ctx.setFillStyle('#660404');
				ctx.fillText(`我是${nickname},`, 150, 70);
				ctx.fillText('发现一家好店，分享给你～', 150, 110);
			} else {
				ctx.setFontSize(24);
				ctx.setFillStyle('#660404');
				ctx.fillText(`我是${nickname},`, 70, 70);
				ctx.fillText('发现一家好店，分享给你～', 70, 110);
			}
			ctx.draw(true, function() {
				uni.canvasToTempFilePath({
					destWidth: 750,
					destHeight: 750,
					canvasId: 'canvasOne',
					fileType: 'jpg',
					success: function(res) {
						uni.hideLoading();
						that.imgUrls = res.tempFilePath;
						that.$set(that, 'poster', res.tempFilePath);
						that.$set(that, 'canvasStatus', false);
					}
				});
			});
		},
		// 点击保存海报
		savePosterPath: function() {
			let that = this;
			uni.getSetting({
				success(res) {
					if (!res.authSetting['scope.writePhotosAlbum']) {
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success(res) {
								uni.saveImageToPhotosAlbum({
									filePath: that.poster,
									success: function(res) {
										that.$util.Tips({
											title: '保存成功',
											icon: 'success'
										});
									},
									fail: function(res) {
										that.$util.Tips({
											title: '保存失败'
										});
									}
								});
							}
						});
					} else {
						uni.saveImageToPhotosAlbum({
							filePath: that.poster,
							success: function(res) {
								that.$util.Tips({
									title: '保存成功',
									icon: 'success'
								});
							},
							fail: function(res) {
								that.$util.Tips({
									title: '保存失败'
								});
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #a3a3a3 !important;
	height: 100% !important;
}
.canvas {
	position: relative;
}
.distribution-posters {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.distribution-posters swiper {
	width: 100%;
	height: 1000rpx;
	position: relative;
	margin-top: 40rpx;
}

.distribution-posters .slide-image {
	width: 700rpx;
	height: 700rpx;
	margin: 0 auto;
	border-radius: 15rpx;
}

.distribution-posters .slide-image.active {
	transform: none;
	transition: all 0.2s ease-in 0s;
}

.distribution-posters .slide-image.quiet {
	transform: scale(0.8333333);
	transition: all 0.2s ease-in 0s;
}

.distribution-posters .keep {
	font-size: 30rpx;
	color: #fff;
	width: 600rpx;
	height: 80rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 80rpx;
	margin: 38rpx auto;
}

.distribution-posters .preserve {
	color: #fff;
	text-align: center;
	margin-top: 38rpx;
}

.distribution-posters .preserve .line {
	width: 100rpx;
	height: 1px;
	background-color: #fff;
}

.distribution-posters .preserve .tip {
	margin: 0 30rpx;
}
</style>
